
<!-- 公共下拉菜单选择组件-->
<!-- hiddenValues 隐藏的枚举值-->
<!-- name 枚举值 默认CommonChooseContentType-->
<!-- chooseContentCode 对应枚举code  srcType -->
<!-- chooseContentText 对应枚举text-->
<!-- chooseContentTitle 自定义input显示标题-->
<!-- disabled 禁用 启用编辑-->
<!-- @choose-->

<template>
  <div>
    <el-input v-if="chooseCode" v-model="chooseContentText" clearable :disabled="true" style="width: 185px" />
    <el-link v-if="!disabled && chooseCode" type="primary" :underline="false" style="margin-left: -25px;margin-right: 10px" @click="clear">
      <i class="el-icon-close" />
    </el-link>
    <el-dropdown v-if="!disabled" trigger="click" @command="handleSelect">
      <span class="el-dropdown-link">
        {{ !chooseCode? hintText : '修改' }} <i class="el-icon-arrow-down el-icon--right" />
      </span>
      <el-dropdown-menu v-if="chooseCode" slot="dropdown">
        <el-dropdown-item v-for="(item, index) in chooseContentList" :key="index" :command="item">{{ item.text }}</el-dropdown-item>
      </el-dropdown-menu>
      <el-dropdown-menu v-else slot="dropdown">
        <el-dropdown-item v-for="(item, index) in chooseContentList" :key="index" :command="item" style="width: 120px">{{ item.text }}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <el-dialog :close-on-click-modal="false" :title="urlTitle" :visible.sync="urlDialog" top="1vh" append-to-body>
      <el-form ref="customDropDown" :model="formData.props" :rules="formData.rules" label-width="100px">
        <div v-if="chooseCode === '6'">
          <el-form-item label="链接地址：" prop="linkUrl">
            <el-input v-model="formData.props.linkUrl" placeholder="请输入v2gogo://协议地址" />
          </el-form-item>
        </div>
        <div v-if="chooseCode === '7'">
          <el-form-item label="链接地址：" prop="linkUrl">
            <el-input v-model="formData.props.linkUrl" placeholder="请输入链接地址" />
          </el-form-item>
        </div>
        <div v-if="chooseCode === '44'">
          <el-form-item label="小程序路径：" prop="linkUrl">
            <el-input v-model="formData.props.linkUrl" placeholder="请输入链接地址" />
          </el-form-item>
          <el-form-item label="APP ID：" prop="appId">
            <el-input v-model="formData.props.appId" placeholder="请输入APP ID" />
          </el-form-item>
          <el-form-item label="原始ID（选填）：">
            <el-input v-model="formData.props.originalId" placeholder="请输入原始ID" />
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="urlDialog = false">取 消</el-button>
        <el-button type="primary" @click="saveLinkUrl">确 定</el-button>
      </span>
    </el-dialog>
    <choose-special
      :visible.sync="selectDialog.chooseSpecialDialog"
      @choose="chooseSpecial"
      @close="close"
    />
    <choose-live-studio
      :visible.sync="selectDialog.chooseLiveStudioDialog"
      @choose="chooseLiveStudio"
      @close="close"
    />
    <choose-club
      :visible.sync="selectDialog.chooseClubDialog"
      @choose="chooseClub"
      @close="close"
    />
    <choose-information
      :visible.sync="selectDialog.chooseInformationDialog"
      @choose="chooseInformation"
      @close="close"
    />
    <choose-nb-broker-news-select
      :visible.sync="selectDialog.chooseNbBrokeNewsDialog"
      @choose="chooseNbBroker"
      @close="close"
    />

  </div>
</template>

<script>
import request from '@/utils/request'
import ChooseSpecial from '@/components/wejoy/ChooseSpecial'
import ChooseLiveStudio from '@/components/wejoy/ChooseLiveStudio'
import ChooseInformation from '@/components/wejoy/ChooseInformation'
import ChooseClub from '@/components/wejoy/ChooseClub'
import ChooseNbBrokerNewsSelect from '@/components/wejoy/ChooseNbBrokerNewsSelect'

export default {
  name: 'CommonDropdownMenu',
  components: { ChooseInformation, ChooseSpecial, ChooseLiveStudio, ChooseClub, ChooseNbBrokerNewsSelect },
  props: {
    hintText: {
      type: String,
      default: '选择跳转的页面'
    },
    hiddenValues: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: 'CommonChooseContentType'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    chooseContentCode: {
      type: String,
      default: ''
    },
    chooseContentTitle: {
      type: String,
      default: ''
    }
  },
  data: function() {
    return {
      chooseContentText: '',
      chooseCode: '',
      urlTitle: '',
      urlDialog: false,
      chooseContentList: [],
      selectDialog: {
        chooseSpecialDialog: false,
        chooseLiveStudioDialog: false,
        chooseClubDialog: false,
        chooseInformationDialog: false,
        chooseNbBrokeNewsDialog: false
      },
      outerData: {
        srcType: '',
        srcId: '',
        srcName: '',
        href: '',
        text: '',
        img: '',
        onlyChooseCode: false
      },
      formData: {
        props: {
          appId: '',
          originalId: '',
          linkUrl: ''
        },
        rules: {
          smallRoutineUrl: this.formRules({ required: true }),
          appId: this.formRules({ required: true }),
          originalId: this.formRules({ required: true }),
          linkUrl: this.formRules({ required: true })
        }
      }
    }
  },
  watch: {
    chooseContentTitle: {
      handler(val) {
        if (val) {
          this.getShowTextByCode()
        }
      },
      immediate: true
    },
    chooseContentCode: {
      handler(val) {
        this.chooseCode = val;
      },
      immediate: true
    }
  },
  created() {
    this.getChooseContentList();
  },
  methods: {
    handleSelect(command) {
      this.chooseCode = command.code;
      this.chooseContentText = command.text;
      this.outerData.srcType = command.code;
      this.outerData.text = command.text;
      switch (command.code) {
        case '1':
          this.selectDialog.chooseInformationDialog = true;
          break;
        case '2':
          this.selectDialog.chooseLiveStudioDialog = true;
          break;
        case '4':
          this.selectDialog.chooseSpecialDialog = true;
          break;
        case '6': case '7': case '44':
          this.initFormData(command);
          break;
        case '19':
          this.selectDialog.chooseClubDialog = true;
          break;
        case '24':
          this.selectDialog.chooseNbBrokeNewsDialog = true;
          break;
        default:
          break;
      }
      this.$emit('choose', this.outerData);
    },
    initFormData(command) {
      this.formData.props = {
        smallRoutineUrl: '',
        appId: '',
        originalId: '',
        linkUrl: ''
      };
      var _this = this;
      setTimeout(e => {
        _this.chooseCode = command.code;
        _this.urlTitle = command.text;
        _this.urlDialog = true;
      }, 100)
    },
    getChooseContentList() {
      request({
        url: `/common/dict/getDictDataByName/${this.name}`,
        method: 'get'
      }).then(res => {
        if (res.data != null && res.data.length > 0) {
          var hiddenValues = this.hiddenValues + '';
          var hiddenArr = hiddenValues.split(',');
          this.chooseContentList = res.data.filter(item => hiddenArr.indexOf(item.code) < 0);
          if (this.chooseContentCode) {
            this.setText();
          }
        }
      })
    },
    getShowTextByCode() {
      if (this.chooseContentList === 0) {
        this.getChooseContentList();
      }
      this.setText();
    },
    setText() {
      for (var i in this.chooseContentList) {
        if (this.chooseContentCode === this.chooseContentList[i].code) {
          this.chooseContentText = this.chooseContentList[i].text + ' | ' + this.chooseContentTitle;
          break;
        }
      }
    },
    saveLinkUrl() {
      var _this = this;
      _this['$refs'].customDropDown.validate(function(valid) {
        if (!valid) {
          return;
        }
        if (_this.chooseCode === '44') {
          _this.outerData.href = 'v2gogo://openminiprogram?miniProgramId=' + _this.formData.props.originalId + '&appId=' + _this.formData.props.appId + '&path=' + _this.formData.props.linkUrl;
        } else {
          _this.outerData.href = _this.formData.props.linkUrl;
        }
        _this.outerData.srcId = _this.formData.props.appId;
        _this.chooseContentText += ' | ' + _this.formData.props.linkUrl;
        _this.urlDialog = false;
        _this.$emit('choose', _this.outerData);
      });
    },
    clear() {
      this.chooseCode = '';
      this.chooseContentText = '';
      this.$emit('clear');
    },
    close() {
      this.selectDialog.chooseSpecialDialog = false;
      this.selectDialog.chooseLiveStudioDialog = false;
      this.selectDialog.chooseClubDialog = false;
      this.selectDialog.chooseInformationDialog = false;
      this.selectDialog.chooseNbBrokeNewsDialog = false;
    },
    chooseSpecial(data) {
      this.outerData.srcId = data.id;
      this.outerData.srcName = data.name;
      this.outerData.img = data.img;
      this.chooseContentText = this.outerData.text + ' | ' + data.name;
      this.$emit('choose', this.outerData);
    },
    chooseNbBroker(data) {
      this.outerData.srcId = data.id;
      this.outerData.srcName = data.content;
      this.chooseContentText = this.outerData.text + ' | ' + data.content;
      this.$emit('choose', this.outerData);
    },
    chooseLiveStudio(data) {
      this.outerData.srcId = data.id;
      this.outerData.srcName = data.title;
      this.outerData.img = data.liveImg;
      this.chooseContentText = this.outerData.text + ' | ' + data.name;
      this.$emit('choose', this.outerData);
    },
    chooseClub(data) {
      this.outerData.srcId = data.id;
      this.outerData.srcName = data.name;
      this.outerData.img = data.icon;
      this.chooseContentText = this.outerData.text + ' | ' + data.name;
      this.$emit('choose', this.outerData);
    },
    chooseInformation(data) {
      this.outerData.srcId = data.id;
      this.outerData.srcName = data.title;
      this.outerData.img = data.img;
      this.chooseContentText = this.outerData.text + ' | ' + data.name;
      this.$emit('choose', this.outerData);
    }
  }
}
</script>
